<template>
  <div>
    <totop class="totop"></totop>
    <selects class="selects"></selects>
    <div class="a">
      <section style="width: 100% ">
        <div style="width: 85vw;margin: 0 auto;">
          <el-row v-for="(Activity ,index ) in ActivityList" :key="index">
            <router-link :to="'/live/'+Activity.id">
              <el-col :span="12">
                <div class="bg-purple">
                  <img src="../assets/placeholder.gif" alt>
                </div>
                <div>
                  <p class="live-type">连线</p>
                  <p class="time">{{Activity.st | time }}</p>
                  <p class="time">{{Activity.st | time | times}}</p>
                  <p class="live-titles" v-text="Activity.title"></p>
                </div>
              </el-col>
            </router-link>
          </el-row>
        </div>
      </section>
    </div>
    <div class="base">
      <p>@2010-2016 生活,读书，新知三联书店</p>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import common from "../components/common";
import totop from "../components/totop";
import selects from "../components/select";
export default {
  data: function() {
    return {
      ActivityList: [],
      dataLength: 0,
      loadingMore: false,
      stt:'',
      week:""
    };
  },
  components: {
    common,
    selects,
    totop
  },
  mounted() {
    this.getActivity();
    window.onscroll = this.didscroll;
  },
  methods: {
    getActivity: function() {
      var _this = this;
      var API_Proxy = "https://bird.ioliu.cn/v1/?url=";
      axios
        .get(
          API_Proxy +
            "http://www.songguolife.com/api/live/classic?page=" +
            this.dataLength +
            "&pageSize=20"
        )
        .then(
          function(data) {
            console.log("请求成功");
            _this.ActivityList = data.data;
            console.log(_this.ActivityList);
          },
          function(data) {
            console.log("请求失败");
            console.log(data);
          }
        );
    },
    didscroll: function() {
      var scrollTop = document.documentElement.scrollTop;
      var contentHeight = document.body.clientHeight;
      var windowHeight = window.innerHeight;
      if (scrollTop + windowHeight > contentHeight - 60) {
        if (this.loadingMore == false) {
          this.loadMorde();
        }
      }
    },
    loadMorde: function() {
      this.status = "loading";
      this.loadingMore = true;
      this.dataLength += 1;
      var _this = this;
      var API_Proxy = "https://bird.ioliu.cn/v1/?url=";
      axios
        .get(
          API_Proxy +
            "http://www.songguolife.com/api/live/classic?page=" +
            this.dataLength +
            "&pageSize=20"
        )
        .then(
          function(data) {
            _this.ActivityList = _this.ActivityList.concat(data.data);
            _this.loadingMore = false;
          },
          function(data) {
            console.log("请求失败");
            console.log(data);
          }
        );
    }
  }
};
</script>
<style scoped>
* {
  box-sizing: border-box;
}

.a section {
  display: inline-block;
  border: 1px solid aqua;
}

.el-row {
  margin-bottom: 20px;
  display: inline-block;
  border-bottom: 1px solid rgb(177, 177, 177);
  margin-left: 2vw;
}

.el-col {
  border-radius: 4px;
}
.bg-purple {
  width: 37vw;
  height: 30vw;
  margin: 12px;
  text-align: center;
  line-height: 30vw;
}

.bg-purple img {
  width: 10vw;
  height: 10vw;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

@media screen and (max-width: 1300px) {
  .bg-purple img {
    width: 10vw;
    height: 10vw;
  }
}

.title {
  position: absolute;
  color: white;
  bottom: 0;
  left: 20px;
}

.ng-binding {
  font-size: 20px;
  font-weight: 550px;
}

.user-name {
  font-size: 15px;
}

.base {
  text-align: center;
  color: #99a9bf;
}

.totop {
  position: sticky;
  top: 0;
  z-index: 999;
}

.selects {
  position: sticky;
  top: 50px;
  z-index: 999;
}
.live-type {
  background: orangered;
  width: 3vw;
  text-align: center;
  border-radius: 20px;
  color: white;
}
.live-titles {
  width: 100%;
  font-size: 1.4vw;
  white-space: nowrap;
  color: black;
}
.time{
  color: black;
}
</style>

